<template>
  <div class="body">
    <div class="mb">
      <div class="header">
        <p>WeYouth平臺用戶手冊</p>
      </div>
      <div class="container">
        <div class="content">
          <div class="title" @click="showPanel(1)">
            <img src="../style/img/apply_list.png" alt>
            <span>注冊登錄</span>
          </div>
          <div class="text" v-show="panel1">
            <p>
              1. &nbsp;&nbsp;手機號碼：
              <br>自動識別香港8比特手機號碼或中國內地11比特手機號碼，無需加區號。
            </p>
            <p>
              2. &nbsp;&nbsp;忘記或修改密碼：
              <br>設置密碼不低於6比特；修改密碼在登入頁點擊“忘記密碼”，登入頁面：http://weyouth.vip/new/page/login.html
            </p>
            <p>
              3. &nbsp;&nbsp;綁定微信：
              <br>綁定微信可直接獲取用戶頭像，並在下次登入時快捷登入，但仍需要先綁定手機及帳戶才可以參加平臺的活動及相關團體。
            </p>
            <p>
              4. &nbsp;&nbsp;綁定Facebook:
              <br>綁定Facebook可直接獲取用戶頭像，並在下次登入時快捷登入，但仍需要先綁定手機及帳戶才可以參加平臺的活動及相關團體。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title"  @click="showPanel(2)">
            <img src="../style/img/diamon.png" alt>
            <span>個人會員</span>
          </div>
          <div class="text" v-show="panel2">
            <p>
              1. &nbsp;&nbsp;修改資料：
              <br>在會員中心點擊自己姓名，進入會員資料修改。
            </p>
            <p>
              2. &nbsp;&nbsp;更改頭像、上傳頭像：
              <br>在會員中心，點擊頭像位置上傳頭像，系統優先採用微信頭像。
            </p>
            <p>
              3. &nbsp;&nbsp;Weyouth平臺會員許可權：
              <br>所有遊客均可注册平臺會員，參與公開活動，申請加入感興趣的社團。
            </p>
            <p>
              4. &nbsp;&nbsp;團體/協會會員許可權：
              <br>及時通過首頁或郵件推送瞭解本會動態；報名參加平臺活動；享受平臺商家優惠；參與協會管理事務
            </p>
            <p>
              5. &nbsp;&nbsp;報名活動：
              <br>打開活動，點擊報名，查看自己的頭像和姓名是否已經新增至成員頭像清單中。主辦方會隨時通過郵件或簡訊形式通知活動進展及變更。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(3)">
            <img src="../style/img/shetuanguanli.png" alt>
            <span>社團管理員</span>
          </div>
          <div class="text" v-show="panel3">
            <p>
              1. &nbsp;&nbsp;團體入駐：<br>
              接受平臺協定的各類團體，經平臺稽核後均可入駐平臺。
              入駐需要首先聯絡客服微訊號：<br>
              tonylu168 <br>
              ①申請入駐----②客服添加團體----③團體指派一名管理員----④完善團體詳情頁----⑤組織會員注册或發佈活動。
            </p>
            <p>
              2. &nbsp;&nbsp;組織會員注册： <br>
            組織會員注册建議採用3種管道， <br>
            A：將“社團詳情頁”分享至會員群或者會員郵箱，請成員點擊頁面正文的“申請加入”；
            B：將“社團詳情頁”網址生成二維碼進行張貼或轉發。
            C：發佈非公開的活動，邀請成員參加，成員點擊報名即會跳轉會員資料登記頁。
            </p>
            <p>
              3. &nbsp;&nbsp;管理社團詳情頁： <br>
            管理員點擊會員中心頁的“管理社團”進入管理頁面。
            管理員可按照圖標提示進行發佈和管理。
            </p>
            <p>
              4. &nbsp;&nbsp;簡訊帳戶及收費問題：<br>
            每條香港本地簡訊收取成本費0.5HKD。
            </p>
            <p>
              5. &nbsp;&nbsp;推廣社團：<br>
            平臺可通過平臺程式、微信公眾號、Facebook專頁進行推廣，各團體進行交流。
            社團管理員可通過社團首頁、活動的轉發分享進行推廣，也可群發社團動態至會員郵箱進行推廣。
            社團成員注册量大的將優先顯示在平臺首頁。
            </p>
            <p>
              6. &nbsp;&nbsp;會員隱私使用許可權： <br>
            平臺不掌握會員具體資料，僅掌握會員手機號碼與郵箱號碼以便提供群發服務；平臺僅定期向註冊會員郵箱發送最新活動資訊，不會將會員資訊用於其他商業用途；平臺不會對任何介面、相關網站、任何公司透露會員手機號碼與郵箱資訊；社團有權利按照社團規定利用會員相關資料。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(4)">
            <img src="../style/img/member_manage.png" alt>
            <span>群發問題</span>
          </div>
          <div class="text" v-show="panel4">
            <p>
              1. &nbsp;&nbsp;群發短信：<br>
              群發程式：①點擊群發----②選擇活動通知/會員通知----③選擇相關活動成員/會員列表中全體或部分會員-----④編輯簡訊文字70字以內-----⑤發送
            </p>
            <p>
              2. &nbsp;&nbsp;群發郵件: <br>
              群發程式：①點擊群發----②選擇活動通知/會員通知----③選擇相關活動成員/會員列表中全體或部分會員-----④編輯圖文-----⑤發送
            </p>
            <p>
              3. &nbsp;&nbsp;郵件帳戶設定：<br>
              因群發短信需要企業郵箱，暫未向各團體提供單獨的企業郵箱，囙此郵件只能單向發送，收到郵件的會員無法回復。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(5)">
            <img src="../style/img/at_manage.png" alt>
            <span>活動管理</span>
          </div>
          <div class="text" v-show="panel5">
            <p>
              1. 發佈活動： <br>
              社團管理員可發佈活動，在“管理社團”頁中點擊“發佈活動”。
            </p>
            <p>
              2. 編輯活動： <br>
              活動發佈後，可在“活動管理”中選中活動，進行編輯。
            </p>
            <p>
              3. 中止活動： <br>
              活動發佈後，可在“活動管理”中選中活動，停止活動，活動將中清單中取消，會員將不再能瀏覽到。
            </p>
            <p>
              4. 活動通知：<br>
              管理員可隨時通過群發短信/郵件向成員或報名人員發送通知。
            </p>
            <p>
              5. 活動留檔： <br>
              活動完成後，活動發佈頁將會留存在社團詳情頁中。 管理員可以將現場精選照片上傳至“社團相册”。 管理員可以將活動編輯成圖文形式發佈在“社團動態”中。
            </p>
            <p>
              6. 活動文宣：<br>
              平臺將會顯示所有活動，並以郵件形式定期向平臺成員推送。 管理員可將活動分享至各類社交媒體平臺進行文宣轉發。
            </p>
            <p>
              7. 活動收費 : <br>
              管理員可在活動編輯中加入活動價格，會員支付費用後，確認報名。
            </p>
            <p>
              8. 活動報名 : <br>
               未來擬新增VIP人工報名席位。 擬新增匯出報名成員名單。 擬新增智慧排座次功能模組。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(6)">
            <img src="../style/img/wallet.png" alt>
            <span>支付管理</span>
          </div>
          <div class="text" v-show="panel6">
            <p>
              1. &nbsp;&nbsp;支付手段： <br>
              WEB程式支援微信支付、阿裡支付、萬事達卡、VISA支付。 微信程式中支持微信支付。 支付貨幣種類以港幣為基準，可支付等價人民幣。
            </p>
            <p>
              2、 &nbsp;&nbsp;違反規定: <br>
              暫不收取費用，待系統成熟穩定後收取費用。
            </p>
            <p>
              3、 &nbsp;&nbsp;違反規定: <br>
              收費活動的報到將暫時打開平臺帳戶，待活動結束後進行結帳提示。系統通過人工操作，以轉數快速轉入社團/個人帳戶中。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(7)">
            <img src="../style/img/dianzan.png" alt="">
            <span>商家</span>
          </div>
          <div class="text" v-show="panel7">
            <p>
              1. &nbsp;&nbsp;入駐提供： <br>
              本港商家需要名稱、地址、電話、簡短折扣詳情、網址、圖片，即可入駐。
            </p>
            <p>
              2. &nbsp;&nbsp;入駐權益： <br>
              平臺通過郵件和頁面向全體成員推廣。
            </p>
          </div>
        </div>
        <div class="content">
          <div class="title" @click="showPanel(8)">
            <span>Weyouth 程序版本</span>
          </div>
          <div class="text" v-show="panel8">
            <p>
              1. Web程式： <br>
              WeYouth在任意瀏覽器中打開（包括微信wacht\facebook\whatsapp），可以通過瀏覽器中的轉發分享步驟或者點擊頁面中的“分享”鍵進行轉發，手機會自動喚起所有可分享的程式。
            </p>
            <p>
              2. 微信小程式： <br>
              僅適用於微信/wechat用戶，轉發僅適用於微信內部。 微信小程式可關聯社團自己已有的公眾號，幫助進行會員管理。
            </p>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserBook',
  data () {
    return {
      panel1: false,
      panel2: false,
      panel3: false,
      panel4: false,
      panel5: false,
      panel6: false,
      panel7: false,
      panel8: false
    }
  },
  methods: {
    showPanel (n) {
      switch (n) {
        case 1: this.panel1 = !this.panel1
          break
        case 2: this.panel2 = !this.panel2
          break
        case 3: this.panel3 = !this.panel3
          break
        case 4: this.panel4 = !this.panel4
          break
        case 5: this.panel5 = !this.panel5
          break
        case 6: this.panel6 = !this.panel6
          break
        case 7: this.panel7 = !this.panel7
          break
        case 8: this.panel8 = !this.panel8
          break
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.mb {
  width: 100%;
  min-height: 800px;
  height: auto;
}
.body {
  height: 100%;
  width: 100%;
  background: #fff;
}
.header {
  width: 100%;
  text-align: center;
  font-size: 20px;
  padding-top: 48px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(112, 112, 112, .3);
}
.container {
  margin-top: 8px;
}
.text {
  padding: 8px;
  line-height: 27px;
  font-size: 20px;
  font-family: Segoe UI;
}
p {
  margin-top: 5px;
}
img {
  width: 33px;
  height: 33px;
}
.title {
  width: 96%;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  /* padding: 8px; */
  border-bottom: 1px solid rgba(112, 112, 112, .3);
}
.title span {
  color: rgba(224, 98, 13, 1);
  font-size: 20px;
}
</style>
